<template>
  <el-drawer
    class="self_drawer"
    v-model="showdrawer"
    direction="btt"
    :show-close="false"
    @close="cancel"
  >
    <template #header>
      <div class="drawer-header">
        <span class="title">
          <span>{{ props.currentRow.objectName }}</span>
          <span class="total"
            >责任科室-{{ props.currentRow.belongOrgName }}</span
          >
          <el-divider direction="vertical" />
          <span class="total"
            >业务分类-{{ props.currentRow.busiTypeNames.join(",") }}</span
          >
          <el-divider direction="vertical" />
          <span class="total">共{{ props.currentRow.dataAmount }}条数据</span>
          <el-divider direction="vertical" />
          <span class="total"
            >更新时间：{{ formatDateTime(props.currentRow.lastModify) }}</span
          >
        </span>
        <el-icon class="icon" @click="cancel"><Close /></el-icon>
      </div>
    </template>
    <el-container style="height: 100%" v-loading="loading">
      <el-header class="header-drawer">
        <FormX
          :formList="dataInfo.search"
          v-model="search"
          @search="getSearch"
        ></FormX>
      </el-header>
      <el-main
        class="container bc-table"
        style="height: 100%; padding-top: 0px"
      >
        <TableX
          :tableData="dataInfo.tableData"
          :column="dataInfo.culumn"
        ></TableX>
      </el-main>
    </el-container>

    <template #footer>
      <div class="drawer-footer">
        <el-pagination
          v-model:current-page="tableField.pageNo"
          v-model:page-size="tableField.pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        />
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { queryoptions, getdatadetail } from "@/api/sjqd";
import { ref, reactive } from "vue";
import { Minxfun } from "@/utils/minxin";
const {
  handleSizeChange,
  handleCurrentChange,
  tableField,
  total,
  loading,
  formatDateTime,
} = Minxfun();
import TableX from "@/components/table/table.vue";
import FormX from "@/components/form/form.vue";
const props = defineProps({
  currentRow: Object,
});

const emit = defineEmits(["close"]);

let showdrawer = ref(true);

let dataInfo = reactive({
  tableData: [],
  culumn: [],
  search: [],
});
let search = reactive({});

const getSearchOption = async () => {
  try {
    let { data } = await queryoptions({
      objectId: props.currentRow.id + "",
    });
    data.forEach((item) => {
      dataInfo.search.push({
        ...item,
        fieldName: item.itemName,
        displayName: item.itemNameChn,
      });
    });
  } catch (e) {
    console.log(e);
  }
};

const getSearch = () => {
  if (tableField.value.pageNo == 1) {
    getTableData();
  } else {
    tableField.value.pageNo = 1;
    getTableData();
  }
};

const getTableData = async () => {
  try {
    let searchArr = [];
    for (let key in search) {
      if (search[key]) {
        searchArr.push({
          fieldName: key,
          value: search[key],
        });
      }
    }
    console.log(searchArr);
    loading.value = true;
    let { data } = await getdatadetail({
      objectId: props.currentRow.id + "",
      queryOptions: searchArr || [],
      ...tableField.value,
      pageNum: tableField.value.pageNo,
    });

    dataInfo.tableData = [];

    if (dataInfo.culumn.length === 0) {
      // let ObjecInfo =
      //   data.objectDataList.length > 0
      //     ? JSON.parse(data.objectDataList[0])
      //     : {};
      let ObjecInfo =
        data.objectDataList.length > 0 ? data.objectDataList[0] : {};
      for (let key in ObjecInfo) {
        dataInfo.culumn.push({
          props: key,
          label: key,
        });
      }
    }
    if (data.objectDataList.length > 0) {
      data.objectDataList.forEach((element, index) => {
        // let item = JSON.parse(element);
        let item = element;
        dataInfo.tableData.push(item);
      });
    }

    total.value = Number(data.total) || 0;
    loading.value = false;
  } catch (e) {
    console.log(e);
  }
};

watch(
  () => props.currentRow,
  (newvla, oldval) => {
    if (!props.currentRow.id) return;
    getTableData();
    getSearchOption();
  },
  { immediate: true }
);
watch(tableField, (newvla, oldval) => {
  getTableData();
});

const cancel = () => {
  emit("close");
};
</script>

<style lang="scss">
.self_drawer {
  height: 80% !important;
}
.el-drawer__header {
  padding: 0 40px;
  margin-bottom: 0;
}
.el-drawer__body {
  padding: 0 40px;
  background: #f6f9ff;
}
.el-drawer__footer {
  background: #f6f9ff;
}
.drawer-header {
  width: 100%;
  height: 70px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #2263bf;
    .total {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      margin-left: 40px;
    }
  }
  .icon {
    font-size: 20px;
    cursor: pointer;
  }
}
.drawer-footer {
  text-align: right;
  padding: 0 40px;
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    .is-active {
      background: #2263bf !important;
    }
  }
  .el-pager li:hover {
    background: rgba(142, 191, 255, 0.72) !important;
    color: #2263bf !important;
  }

  .btn-prev {
    width: 84px !important;
    position: relative;
    padding-left: 16px;
    &::before {
      content: "<<";
      position: absolute;
      left: 8px;
      top: 0px;
    }
  }
  .btn-next {
    width: 84px !important;
    position: relative;
    padding-right: 16px;
    &::before {
      content: ">>";
      position: absolute;
      right: 8px;
      top: 0;
    }
  }
}

.header-drawer {
  padding-top: 20px;
  box-sizing: border-box;
  height: auto;
}
</style>